<template>
  <div class="classify">
    <template>
      <el-table
        :data="classifyList"
        :height="tableHeight"
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="#" width="50"> </el-table-column>
        <el-table-column prop="name" label="类别名称">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-model="form.name"
              clearable
              v-if="scope.$index == 0"
              @blur.native="onAdd"
              @keyup.enter.native="onAdd"
              @keyup.esc.native="oncancel"
              v-focus
            >
            </el-input>
            <div v-else>
              <el-input
                placeholder="请输入内容"
                v-model="form.editIpt"
                clearable
                v-if="scope.row.id == editId"
                @blur.native="onAdd"
                @keyup.enter.native="onAdd"
                @keyup.esc.native="oncancel"
                v-iptVal
              >
              </el-input>
              <el-button
                type="primary"
                @dblclick.native="onEdit(scope.row)"
                plain
                v-else
                >{{ scope.row.name }}</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <div v-if="scope.$index == 0">
              <el-button type="success" size="small" @click="onAdd"
                >保存</el-button
              >
            </div>
            <div v-else-if="scope.row.id == editId">
              <el-button type="success" size="small" @click="onAdd"
                >保存</el-button
              >
              <el-button type="info" size="small" @click="oncancel"
                >取消</el-button
              >
            </div>
            <div v-else>
              <el-button type="primary" size="small" @click="onEdit(scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="onDelete(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  data() {
    return {
      form: {
        name: "",
        editIpt: "",
      },
      tableHeight: null,
      editId: null,
    };
  },
  mounted() {
    this.renderList();
    this.getHeight()
    window.addEventListener("resize", this.getHeight(), false);
  },
  computed: {
    ...mapState("classify", ["classifyList"]),
  },
  methods: {
    ...mapActions("classify", [
      "getClassifyList",
      "addClassifyData",
      "editClassifyData",
      "deleteClassifyData",
    ]),
    getHeight() {
      console.log(this.tableHeight)
      this.tableHeight = document.documentElement.clientHeight-70
    },
    async renderList() {
      await this.getClassifyList();
    },
    async onAdd() {
      if (this.form.id) {
        if (!this.form.editIpt) {
          this.deleteClassifyData({ id: this.form.id });
          return;
        }
        let form = { ...this.form };
        await this.editClassifyData({ id: form.id, name: form.editIpt });
      } else {
        if (!this.form.name) {
          return;
        }
        await this.addClassifyData({
          name: this.form.name && this.form.name.trim(),
        });
      }
      this.form = {};
      this.editId = null;
    },
    onEdit(row) {
      this.form = { ...row, name: "", editIpt: row.name };
      this.editId = row.id;
    },

    oncancel() {
      this.editId = null;
      this.form.editIpt = "";
    },
    onDelete(id) {
      this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteClassifyData({ id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  directives: {
    focus: {
      inserted(el, binding) {
        el.children[0].focus();
      },
    },
    iptVal: {
      inserted(el) {
        el.children[0].focus();
      },
      update(el) {
        el.children[0].focus();
      },
    },
  },
};
</script>

<style scoped>
.classify {
  padding: 20px 20px 0px 20px;
}
</style>